<template>
  <div>
    <!-- not defined  :找出出错文件，搜索相应关键字，确定是方法还是属性，方法一般在methods找，属性一般在data中找  -->
    <div>{{ abc }}</div>
    <button @click="fn">方法</button>
    <!-- not found
       1:路径错了
       2：文件不存在(插件没安装，或者插件名写错)
         如果是插件没安装就要安装就可以了
    -->
    <img src="@/assets/common/img.jpeg" alt="">

    <!-- 导入错误：走了98%走不动了，就是导入错误，找自己刚写的代码
         导入错误：Object(...) is not a function  导入写错了，是可以通过提示找出是哪一个导入
    -->

    <!--  of undefined (reading 'b')  b前面的值为undefined -->
    <hr>
    <div v-if="xxx">  {{ xxx.a.b }}</div>

    <!-- 接口调用类错误:传参错误，请求方式错误，或者url地址写错等错误...
       看network:看url,看请求方式，看传参
    -->
    <button @click="fn">方法</button>
    <button @click="fn">调用第二页数据</button>

    <!-- 指令写错类 -->
    <input v-model="xxx" type="text">
  </div>
</template>
<script>
import { sysUser } from '@/api/employees'
export default {
  data() {
    return {
      abc: 1,
      xxx: '' // xxx在接口调用完返回了一个对像 xxx={a:{b:'张三'}}
    }
  },
  methods: {
    async  fn() {
      const res = await sysUser()
      console.log(res)
    }
  }
}
</script>
<style>
</style>
